<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<meta http-equiv="content-security-policy">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>地址修改</title>
		<!-- build:css /css/main.css -->
		<link href="/css/mui.css" rel="stylesheet" />
		<link href="/css/iconfont.css" rel="stylesheet" />
		<link href="/css/common.css" rel="stylesheet" />
		<!-- endbuild -->
		<!-- build:css /css/mui.picker.min.css -->
		<link href="/css/mui.picker.css" rel="stylesheet" />
		<!-- endbuild -->
		<style>
			.mui-content {
				height: auto;
			}
			
			.mui-input-group:after,
			.mui-input-group:before {
				background-color: #fff;
				height: 0px;
			}
			
			.mui-input-group .mui-input-row:after {
				background-color: #000;
				height: 0px;
			}
			
			.area {
				margin: 20px auto 0px auto;
			}
			
			.mui-input-group {
				margin-top: 10px;
			}
			
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				font-size: 12px;
			}
			
			.mui-btn {
				padding: 10px;
			}
			
			.link-area {
				display: block;
				text-align: center;
			}
			
			.spliter {
				color: #bbb;
				padding: 0px 8px;
			}
			
			.oauth-area {
				position: absolute;
				bottom: 20px;
				left: 0px;
				text-align: center;
				width: 100%;
				padding: 0px;
				margin: 0px;
			}
			
			.oauth-area .oauth-btn {
				display: inline-block;
				width: 50px;
				height: 50px;
				background-size: 30px 30px;
				background-position: center center;
				background-repeat: no-repeat;
				margin: 0px 20px;
				border: solid 1px #ddd;
				border-radius: 25px;
			}
			
			.oauth-area .oauth-btn:active {
				border: solid 1px #aaa;
			}
			
			.mui-input-row label {
				width: 80px;
				padding: 16px 10px 10px 10px;
				font-size: 12px;
			}
			
			.mui-input-row input {
				padding-top: 16px;
			}
			
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				float: left;
			}
			
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				position: initial;
			}
			
			.mui-checkbox input[type=checkbox]:before,
			.mui-radio input[type=radio]:before {
				color: #e83426;
				font-size: 20px;
			}
			
			.mui-radio span {
				display: inline-block;
				float: none;
				width: 40%;
				margin: 12px 0;
				padding-right: 0;
				color: #e83426;
			}
			
			.mui-checkbox input[type=checkbox]:checked:before,
			.mui-radio input[type=radio]:checked:before {
				color: #e83426;
			}
			
			.mui-input-group .mui-input-row {
				border-bottom: solid 1px #eee
			}
			
			.mui-radio input[type=radio]:before {
				font-size: 1.1rem;
				padding-right: 0;
			}
			
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				width: auto;
			}
			
			.mui-input-row .mui-btn {
				border: 0 none;
				color: #fff;
				font-size: 14px;
				width: 45%;
				margin-right: 2.5%;
				margin-left: 2.5%;
			}
			
			.mui-btn-blue,
			.mui-btn-primary,
			input[type=submit] {
				color: #fff;
				border: 1px solid #ff5200;
				background-color: #ff5200;
			}
		</style>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav u-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">地址修改</h1>
			<span id="to_info" class="mui-icon mui-icon-bars mui-pull-right" onclick="ssdd('#fnav')"></span>
		</header>
		<nav class="mui-bar mui-bar-tab otherNav" id="fnav">
			<a class="mui-tab-item" data-id="index.html" data-url="/index.html">
				<span class="mui-icon iconfont icon-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" data-id="category.html" data-url="/category.html">
				<span class="mui-icon iconfont icon-fenlei"></span>
				<span class="mui-tab-label">分类</span>
			</a>
			<a class="mui-tab-item" data-id="search.html" data-url="/search.html">
				<span class="mui-icon iconfont icon-fenleisousuo-home"></span>
				<span class="mui-tab-label">搜索</span>
			</a>
			<a class="mui-tab-item" data-id="cart.html" data-url="/cart.html">
				<span class="mui-icon iconfont icon-gouwuche1"></span>
				<span class="mui-tab-label">购物车</span>
			</a>
			<a class="mui-tab-item" data-id="user.html" data-url="/user/user.html">
				<span class="mui-icon iconfont icon-gerenzhongxin"></span>
				<span class="mui-tab-label">我</span>
			</a>
		</nav>

		<div class="mui-content">
			<div id='login-form' class="mui-input-group">
				<div class="mui-input-row">
					<label>收货人姓名</label>
					<input id="consignee" type="text" class="mui-input-clear mui-input" placeholder="请输入收货人姓名">

				</div>
				<div class="mui-input-row">
					<label>手机号码</label>
					<input id="mobile" type="number" class="mui-input-clear mui-input" placeholder="请输入手机号码">
				</div>
				<div class="mui-input-row">
					<span class=" mui-navigate-right">
					<label >所在地区</label>
					<input readonly="readonly" id="region" type="text" class="mui-input-clear mui-input" placeholder="请选择地区">
					</span>
				</div>
				<div class="mui-input-row">
					<label>详情地址</label>
					<input id="address" type="text" class="mui-input-clear mui-input" placeholder="请输入详细地址">
				</div>
			</div>

			<div class="mui-input-row" style="margin-top:10px;border-bottom: 0;">
				<button id='delbtn' class="mui-btn mui-btn-block mui-btn-primary" style="background-color: #7a7a7a;border-color: #7a7a7a;">删除</button>
				<button id='editbtn' class="mui-btn mui-btn-block mui-btn-primary" style="background-color: #ff5200; border-color: #ff5200;"> 保存 </button>
			</div>

		</div>
		<!-- build:js /js/vendor.js -->
		<script src="/js/mui.min.js"></script>
		<!-- bower:js -->
		<script src="/bower_components/mockjs/dist/mock.js"></script>
		<script src="/bower_components/zepto/zepto.js"></script>
		<script src="/bower_components/Zepto-Cookie/zepto.cookie.js"></script>
		<!--  endbower -->
		<!-- endbuild -->
		<!-- build:js /js/mui.picker.js -->
		<script src="/js/mui.picker.min.js"></script>
		<script src="/js/mui.poppicker.js"></script>
		<script src="/js/city.data.js" type="text/javascript" charset="utf-8"></script>
		<!-- endbuild -->
		<!-- build:js /js/main.js -->
		<script src="/js/common.js"></script>
		<script src="/js/app.js"></script>
		<!-- endbuild -->
		<script>
		var addrType = localStorage.getItem('addrType');
			var addrId = localStorage.getItem('addrId');
			var tokenVal = $.fn.cookie('token');
			ifLogin(tokenVal);
			(function(mui, doc) {
				mui.init();
				mui.ready(function() {
					var cityPicker = new mui.PopPicker({
						layer: 3
					});
					cityPicker.setData(cityData);
					$('#region').on('tap', function(event) {
						cityPicker.show(function(items) {
							$('#region').val((items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text);
						});
					}, false);
					
					function getAddress(){
						$.ajax({
							url: __BATE__ + 'api/addrDetailById',
							type: 'post',
							async: 'false',
							data: {
								addr_id: addrId
							},
							success: function(json) {
								if(json.ret_msg=='查询成功'){
									var consignee = $("#consignee").val(json.data.name);
									var mobile = $("#mobile").val(json.data.phone);
									var region = $("#region").val(json.data.province+ ' ' +json.data.city+ ' ' +json.data.district);
									var address = $("#address").val(json.data.consignee_addr);
								}else{
									stip(json.ret_msg)
								}
								
							}
						});
					}

getAddress()
					$("#editbtn").on("tap", function() {
						var consignee = $("#consignee").val();
						var mobile = $("#mobile").val();
						var region = $("#region").val();
						var address = $("#address").val();
						var strs= new Array(); //定义一数组 
							strs=region.split(" "); //字符分割 
						if(consignee.length <= 0) {
							stip('请填写收货人姓名');
							return;
						}
						if(mobile.length <= 0) {
							stip('请填写收货人手机号码');
							return;
						}
						if(region.length <= 0) {
							stip('请选择地区');
							return;
						}
						if(address.length <= 0) {
							stip('请填写详细地址');
							return;
						}
						$.ajax({
							url:__BATE__+'api/updateCustomerAddr', 
							data:{
							addr_id: addrId,
							province: strs[0],
							city: strs[1],
							district: strs[2],
							name: consignee,
							phone: mobile,
							consignee_addr: address,
							token: tokenVal
							
						}, 
						type:'post',
						success:function(json) {
							if(json.ret_msg !== '修改成功') {									
										stip(json.ret_msg)
								}else{
									if(addrType=='cart'){
										openView('/user/cart-address-list.html','cart-address-list.html')
									}else{
										openView('/user/address-list.html','address-list.html')
									}
								}
						}
						});

					});

					$("#delbtn").on("tap", function() {
						var btnArray = ['否', '是'];
						mui.confirm('确定删除地址吗？', '', btnArray, function(e) {
							if(e.index == 1) {
								$.ajax({
									url: __BATE__ + 'api/deleteAddr',
									data: {
										addr_id: addrId
									},
									type: 'post',
									success: function(json) {
										if(json.ret_msg == '删除成功') {
											localStorage.setItem('addrId','');
											if(addrType=='cart'){
										openView('/user/cart-address-list.html','cart-address-list.html')
									}else{
										openView('/user/address-list.html','address-list.html')
									}
										} else {
											stip(json.ret_msg)
										}
									},
									error: function() {
										serverErr();
									}
								});
								
							}
						})

					});

				});
			}(mui, document));
		</script>
	</body>

</html>